<template>
    <div class="word-box">
        <div class="left-arrow" v-if="state.currentIndex > 1" @click="previousWord">
            <span><i class="bi bi-arrow-left-circle mr"></i>{{'第'+ (state.currentIndex - 1 ) + '题'}}</span>
        </div>
        <div class="word-control-box">
            <div v-if="state.eyeStatus || writeType != 1">
                <span>{{ nowWordObj.word }}</span>
                <span v-if="state.isAudio" class="ml bi bi-volume-up" @click="addAudio"></span>
            </div>
            <div v-else-if="writeType == 1">
				<!-- <el-input :class="{blue: valueStatus == 1 || valueStatus == 3, red: valueStatus == 2}" v-model="inputValue" placeholder="请输入内容"></el-input> -->
                <input :class="{blue: valueStatus == 1 || valueStatus == 3, red: valueStatus == 2}" type="text" v-model="inputValue">
                <i v-if="valueStatus == 3" class="bi bi-check-circle-fill green ml"></i>
                <span v-if="state.isAudio" class="ml bi bi-volume-up" @click="addAudio"></span>
            </div>
            <div v-if="state.eyeStatus ||  writeType != 2">
                <span>{{nowWordObj.chinese}}</span>
            </div>
            <div v-else-if="writeType == 2" >
                <input :class="{blue: valueStatus == 1 || valueStatus == 3, red: valueStatus == 2}" type="text" v-model="inputChinese">
                <i v-if="valueStatus == 3" class="bi bi-check-circle-fill green ml"></i>
            </div>
            <div v-if="valueStatus == 3">
				  <el-button type="primary" @click="nextWord">下一个</el-button>
            </div>
			<el-progress :text-inside="false" :show-text="false" :stroke-width="26" :percentage="(state.currentIndex/state.wordLength)*100"></el-progress>
        </div>
        <div class="right-arrrow" @click="nextWord">
            <span v-if="state.currentIndex != (state.wordLength)">{{'第'+ (state.currentIndex + 1) + '题'}}<i class="bi bi-arrow-right-circle ml"></i></span>
            <span v-else>{{'最后一题'}}</span>
        </div>
        <audio v-if="state.isAudio" id="audioPlayer" controls style="display: none;">
            <source :src="'https://dict.youdao.com/dictvoice?audio='+ nowWordObj.word +'&le=ko&type='" type="audio/mpeg">
        </audio>
    </div>
</template>
<script setup>
import { watch, ref, computed } from 'vue';

const inputValue = ref('');
const inputChinese = ref('');
const valueStatus = ref(0); // 1-blue 2-red
const state = computed(() => {
    return $store.state
})
const writeType = computed(() => {
    return $store.getters.nowWordObj.writeType || $store.state.writeType
})
// 当前单词
const nowWordObj = computed(() => {
    return $store.getters.nowWordObj
})
watch(
    () => $store.getters.nowWordObj,
    val => {
        console.log(val.checked, val)
        if (val.checked && val.checked != 0) {
            valueStatus.value = val.checked
            if (val.writeType == 1 ) {
                inputValue.value = val.inputValue
            } else if (val.writeType == 2) {
                inputChinese.value =  val.inputValue
            } else {
                inputValue.value = ''
                inputChinese.value = ''
            }
        } else {
            valueStatus.value = 0
            inputValue.value = ''
            inputChinese.value = ''
        }
    },
    {
        deep: true
    }
)
watch(
    () => inputValue.value,
    val => {
        if ($store.state.writeType == 1) {
            if (!val) {
                valueStatus.value = 0
            } else if (val == $store.getters.nowWordObj.word) {
                valueStatus.value = '3'
            } else if (val && $store.getters.nowWordObj.word.startsWith(val)) {
                valueStatus.value = '1'
            } else {
                valueStatus.value = '2'
            }
        }
    }
)
watch(
    () => inputChinese.value,
    val => {
        if ($store.state.writeType == 2) {
            console.log($store.getters.nowWordObj.chinese, val)
            if (!val) {
                valueStatus.value = 0
            } else if (val == $store.getters.nowWordObj.chinese) {
                valueStatus.value = '3'
            } else if (val && $store.getters.nowWordObj.chinese.startsWith(val)) {
                valueStatus.value = '1'
            } else {
                valueStatus.value = '2'
            }
        }
    }
)
const addAudio = () => {
    const audio = document.getElementById('audioPlayer');
    audio.load();
    audio.play();
}
const previousWord = () => {
    $store.dispatch('previousWord')
}
const nextWord = () => {
    if ($store.state.currentIndex >= $store.state.wordLength) {
        return
    } else {
        $store.getters.nowWordObj.checked = valueStatus.value
        $store.getters.nowWordObj.writeType = $store.state.writeType
        $store.getters.nowWordObj.inputValue = $store.state.writeType == 1 ? inputValue.value : inputChinese.value
        $store.dispatch('nextWord')
    }
}
// 添加错题本
const AddErrWords = () => {
	
}
</script>
<style lang="less" scoped>
.word-box {
    margin-top: 50px;
    position: relative;
    width: 100%;
    flex: 1;
    .left-arrow {
        position: absolute;
        top: 0;
        left: 50px;
    }
    .right-arrrow {
        position: absolute;
        top: 0;
        right: 50px;
    }
    .word-control-box {
        width: 60%;
        font-size: 30px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
		top: 100px;
        >div {
            margin-bottom: 20px;
        }
    }
    .ml {
        margin-left: 10px;
    }
    .mr {
        margin-right: 10px;
    }
    input {
        border: 0;
        box-shadow: 0 0 2px #ccc;
		font-size: 28px;
		width: 70%;
        &:focus {
            border: 0;
            outline: none;
        }
        &.red {
            border: 2px solid red;
            box-shadow: 0 0 5px red;
            &:focus {
                border: 2px solid red;
                outline: none;
            }
        }
        &.blue {
            border: 1px solid #03c003;
            box-shadow: 0 0 2px #03c003;
            &:focus {
                border: 1px solid #03c003;
                outline: none;
            }
        }
    }
    .green {
        &:before {
            color: #03c003;
        }
    }
}
</style>